<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('filed.faqiSale')}}</block>
		</cu-custom>
		<view class="margin-ht grid gap" style="margin-top: 20rpx;">
			<text class="font-400 text-black" style="font-size: 30rpx;">{{$t('filed.saleType')}}</text>
			<u-input :placeholder="$t('filed.PlaceSaleType')" v-model="title" :customStyle="inputStyle" readonly
				@click.native="showType=true"></u-input>
			<text class="font-400 text-black" style="font-size: 30rpx;">{{$t('filed.reason')}}</text>
			<u-textarea v-model="content" :placeholder="$t('public.placeholderContent')" :customStyle="inputStyle" count
				maxlength="500"></u-textarea>
			<text class="font-400 text-black" style="font-size: 30rpx;">{{$t('public.img')}}</text>
			<uploadImg @sendImage="sendImage" @delImage="delImage" />
		</view>
		<view style="position: fixed;bottom: 60rpx;left: 25rpx;right: 25rpx;">
			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;"
				@tap.stop="orderShouhou">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>
		<u-action-sheet :show="showType" :actions="TypeActions" @close="showType = false" @select="typeSelect"
			safeAreaInsetBottom />
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		orderShouhou
	} from '@/apis'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				title: '',
				shouhou_type: '',
				content: '',
				inputStyle: {
					background: '#FFFFFF',
					borderRadius: '20rpx'
				},
				images: [],
				order_id: '',
				showType: false,
				TypeActions: [{
						id: 1,
						name: this.$t('filed.zhiliang'),
					},
					{
						id: 2,
						name: this.$t('filed.facuo'),
					},
					{
						id: 3,
						name: this.$t('filed.other'),
					}
				],
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
		},
		methods: {
			typeSelect(e) {
				this.title = e.name
				this.shouhou_type = e.id
			},
			sendImage(event, keyWord) {
				this.images = [...this.images, ...event.sendList.splice(0, event.fileListLen)]
			},
			delImage(e) {
				this.images.splice(e, 1)
			},
			async orderShouhou() {
				await this.helper.checkForm([
					['string', this.title, this.$t('filed.saleType')],
					['string', this.content, this.$t('filed.reason')],
					['string', this.images.join(','), this.$t('public.img')],
				])
				await orderShouhou({
					order_id: this.order_id,
					shouhou_remark: this.content,
					shouhou_images: this.images.join(','),
					shouhou_type: this.shouhou_type
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-textarea,
	/deep/ .u-input {
		border: none;
	}
</style>